<div class="category-management">
  <!-- 页面标题和操作区域 -->
  <div class="header-section">
    <div class="title-section">
      <h2>分类管理</h2>
      <p>管理博客文章分类</p>
    </div>
    <div class="action-section">
      <nz-button-group>
        <button nz-button nzType="primary" (click)="showAddModal()">
          <i nz-icon nzType="plus"></i>
          添加分类
        </button>
      </nz-button-group>
    </div>
  </div>

  <!-- 搜索区域 -->
  <div class="search-section">
    <nz-input-group [nzSuffix]="suffixTemplate">
      <input 
        type="text" 
        nz-input 
        placeholder="搜索分类名称或描述..." 
        [(ngModel)]="searchValue"
        (keyup.enter)="onSearch()"
      />
    </nz-input-group>
    <ng-template #suffixTemplate>
      <i nz-icon nzType="search" (click)="onSearch()" class="search-icon"></i>
    </ng-template>
    <button nz-button nzType="default" (click)="onSearchReset()" class="reset-btn">
      重置
    </button>
  </div>

  <!-- 数据表格 -->
  <div class="table-section">
    <nz-table 
      #basicTable 
      [nzData]="categories" 
      [nzLoading]="loading"
      [nzPageSize]="pageSize"
      [nzPageIndex]="pageIndex"
      [nzTotal]="total"
      [nzShowSizeChanger]="true"
      [nzPageSizeOptions]="[10, 20, 50]"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      nzShowQuickJumper
    >
      <thead>
        <tr>
          <th>分类名称</th>
          <th>描述</th>
          <th>创建时间</th>
          <th>更新时间</th>
          <th nzWidth="200px">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let category of categories">
          <td>
            <nz-tag nzColor="blue">{{ category.title }}</nz-tag>
          </td>
          <td>
            <span class="description" [title]="category.desc">
              {{ category.desc.length > 50 ? category.desc.substring(0, 50) + '...' : category.desc }}
            </span>
          </td>
          <td>{{ formatDate(category.createdAt) }}</td>
          <td>{{ formatDate(category.updatedAt) }}</td>
          <td>
            <nz-button-group>
              <button 
                nz-button 
                nzSize="small" 
                nzType="primary" 
                nzGhost
                (click)="showEditModal(category)"
              >
                <i nz-icon nzType="edit"></i>
                编辑
              </button>
              <button 
                nz-button 
                nzSize="small" 
                nzType="primary" 
                nzDanger
                nz-popconfirm
                nzPopconfirmTitle="确定删除这个分类吗？"
                (nzOnConfirm)="deleteCategory(category._id)"
              >
                <i nz-icon nzType="delete"></i>
                删除
              </button>
            </nz-button-group>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>

  <!-- 添加/编辑分类模态框 -->
  <nz-modal 
    [(nzVisible)]="isModalVisible"
    [nzTitle]="modalTitle"
    (nzOnCancel)="handleModalCancel()"
    (nzOnOk)="handleModalOk()"
    nzOkText="确定"
    nzCancelText="取消"
  >
    <ng-container *nzModalContent>
      <form nz-form [formGroup]="categoryForm" nzLayout="vertical">
        <nz-form-item>
          <nz-form-label nzRequired>分类名称</nz-form-label>
          <nz-form-control [nzErrorTip]="getFormControlError('title')">
            <input 
              nz-input 
              formControlName="title" 
              placeholder="请输入分类名称"
              maxlength="50"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzRequired>分类描述</nz-form-label>
          <nz-form-control [nzErrorTip]="getFormControlError('desc')">
            <textarea 
              nz-input 
              formControlName="desc" 
              placeholder="请输入分类描述"
              [nzAutosize]="{ minRows: 3, maxRows: 6 }"
              maxlength="200"
            ></textarea>
          </nz-form-control>
        </nz-form-item>
      </form>
    </ng-container>
  </nz-modal>
</div>
